<template>
	<view class="">
		<view class="bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">设置</block>
			</cu-custom>
		</view>
		<view class="bg-white margin-lr-xs margin-top-sm margin-bottom-sm radius-lg">
			<u-cell-group>
				<u-cell icon="account" isLink title="昵称" @click="updateNickName" :value="user.nickName"></u-cell>
				<u-cell :icon="user.genderIcon?user.genderIcon:'man'" isLink title="性别" @click="updateGender"
					:value="user.genderStr"></u-cell>
				<u-cell icon="phone" isLink title="更换手机" @click="todo('/pages/setting/updateMobile')"
					:value="user.mobile"></u-cell>
			</u-cell-group>
		</view>
		<view class="bg-white margin-lr-xs radius-lg">
			<u-button @click="logout">退出</u-button>
		</view>

		<u-modal :show="nickNameModal.show" title="修改用户名" @confirm="submitNickName" @cancel="cancelNickName"
			:showCancelButton="true">
			<view style="padding:10px 50px;">
				<u-input style="padding: 0rpx 30rpx;background-color: #ededed;" v-model="nickNameModal.value"
					placeholder="请输入用户名" />
			</view>
		</u-modal>

		<u-action-sheet :actions="gender.list" :show="gender.show" @select="selectGender"></u-action-sheet>
	</view>
</template>

<script>
	import {
		toast
	} from '@/utils/common'
	export default {
		data() {
			return {
				isLogin: false,
				user: {
					genderIcon: 'man',
				},
				gender: {
					show: false,
					list: [{
						name: '男',
						value: 0
					}, {
						name: '女',
						value: 1
					}]
				},
				nickNameModal: {
					show: false,
					value: ''
				}
			}
		},
		onLoad() {
			if(this.$store.state.user.user){
				this.user = JSON.parse(this.$store.state.user.user)
			}
			this.init();
		},
		methods: {
			init() {
				const user = this.user;
				if (this.gender !== '') {
					if (user.gender == 1) {
						user.genderStr = '女';
						user.genderIcon = 'woman';
					}
					if (user.gender == 0) {
						user.genderStr = '男';
						user.genderIcon = 'man';
					}
					this.user = user;
				}
			},
			openPage(url) {
				if (this.user.token == '') {
					this.$tab.navigateTo('/pages/login/login');
					return;
				}
				this.$tab.navigateTo(url)
			},
			todo(url) {
				toast('开发中');
			},
			updateNickName() {
				console.info('updateNickName', )
				this.nickNameModal.value = this.user.nickName;
				this.nickNameModal.show = true;
			},
			submitNickName() {
				this.user.nickName = this.nickNameModal.value
				this.$store.commit('SET_USER', JSON.stringify(this.user))
				this.nickNameModal.show = false;
				toast('开发中');
			},
			cancelNickName() {
				this.nickNameModal.show = false;
				toast('开发中');
			},
			updateGender() {
				this.gender.show = true;
			},
			selectGender(item) {
				this.user.genderStr = item.name;
				this.user.gender = item.value;
				if (this.user.gender == 1) {
					this.user.genderIcon = 'woman';
				}
				if (this.user.gender == 0) {
					this.user.genderIcon = 'man';
				}
				this.gender.show = false;
				toast('开发中');
			},
			logout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						uni.removeStorageSync('isLogin')
						this.$tab.navigateTo('/pages/login/index')
						//window.location.href = window.location.origin +'#/pages/login/login'
					}).catch(() => {})
				})
			},
			toDoc() {
				this.$tab.navigateTo(`/pages/common/webview/index?title=在线文档&url=http://www.wbihua.com`)
			}
		}
	}
</script>

<style>
	page {
		background-color: #ededed;
	}

	view,
	text {
		box-sizing: border-box;
	}
</style>

<style lang="scss" scoped>
	.t-page {
		width: 100%;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
		background-color: #FFFFFF;
	}

	.wrap {
		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
		}

		.user-box {
			background-color: #fff;
		}

		.u-m-t-20 {
			margin-top: 10px !important;
		}
	}
</style>